<template>
    <div>
        <select v-model="sel" @change="changsel">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <p>{{ $store.state.bb }}</p>
        <button @click="toAAA">点击修改</button>
        <input type="text" v-model="inpVal" @input="inpuName" />
        <button @click="addHobby">点击添加</button>
        <comAVue />
        <comBVue />
    </div>
</template>

<script>
import comAVue from "../components/comA.vue"
import comBVue from "../components/comB.vue"
export default {
    components: { comAVue, comBVue },
    data() {
        return {
            inpVal: "",
            sel: "1"
        }
    },
    methods: {
        toAAA() {
            //不建议 vue devtools没有更新  
            // this.$store.state.name = "vavds"
            //推荐 vue devtools有更新
            this.$store.commit('changeName')
        },
        inpuName() {
            this.$store.commit('inpuName', this.inpVal)
        },
        addHobby() {
            // 只能携带一个参数 名词提交载荷
            // this.$store.commit('addHobby', '1', '1', '2')
            // 如果用多参数就有用数组或者对象
            this.$store.commit('addHobby', ['1', '1', '2'])
        },
        changsel() {
            //触发 actions里面的方法
            this.$store.dispatch('requestAction')
        }
    },
}
</script>

<style lang="scss" scoped>
</style>